<template>
  <div class="hot-search-header">
    <div class="hot-header-center">
      <!-- 头部 -->
      <div class="header-left">
        <h2 class="hot-title" title="爆品情报系统"><nuxt-link to="/hotSystem">爆品情报系统</nuxt-link></h2>
        <div class="hot-search-keywords">
          <div class="hot-border-gradient">
            <input type="text" placeholder="请输入关键词" @keyup.enter="searchContent" v-model="searchText" @input="isEmpty()">
            <div class="tooltip" v-show="isShowTooltip">
              <EmptyTooltip></EmptyTooltip>
            </div>
          </div>
          <div class="hot-serarch-icon" @click="searchContent" >
            <i class="iconfont iconicon-sousu-copy"></i>
          </div>
        </div>
      </div>
      <!-- 右边 -->
      <div class="header-right">
        <div class="hot-favorite" @click="favoriteHandler">
          <img src="../../assets/images/hot-system-favorite.png" alt="加载中...">
          <span @click="favoriteHandler">收藏夹</span>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
  // 提示组件
  import EmptyTooltip from '../EmptyTooltip'
  export default {
    components:{EmptyTooltip},
    data () {
      return {
        //搜索文本
        searchText:"",
        isShowTooltip:false,
        timer:null,
      }
    },
    methods:{
      //收藏夹
      favoriteHandler(){
        console.log("收藏夹")
        this.$router.push("/hotCollect")
      },
      //搜索内容
      searchContent(){
        if(!this.searchText){
          //先清除定时器
          if(this.timer){
            this.clearTime();
          }
          this.isShowTooltip = true;
          if(this.isShowTooltip){
            this.timer = setInterval(()=>{
              this.isShowTooltip = false;
            },3000)
          }
        }else{
          console.log("搜索内容")
          this.clearTime();
          this.$emit('searchHandler',this.searchText)
        }
      },
      // input 内容发生变化，立马隐藏掉弹框,同时清除定时器
      isEmpty(){
        this.isShowTooltip = false;
        this.clearTime();
      },
      //清除定时器
      clearTime() {
        clearInterval(this.timer);
        this.timer = null;
      },
    },
    beforeDestory() {
      this.clearTime();
    }
  }
</script>

<style scoped>
 /* 爆品头部 */
.hot-search-header{
  height:100px;
  border-bottom:2px solid #404040;
  box-sizing:border-box;
  display:flex;
  align-items:center;
}
.hot-header-center{
  width:1440px;
  display:flex;
  justify-content:space-between;
  margin: 0 auto;
  color:#dbdbdc;
  font-size: 16px;
}
@media screen and (max-width:1440px){
  .hot-header-center{
    width:1200px;
    margin: 0 auto;
  }
}
/* 头部左边 */
.header-left{
  display:flex;
  justify-content:space-between;
  align-items: center;
  width:700px;
}
.header-left h2 a{
  text-indent:-20000px;
  display:block;
  overflow:hidden;
  width:253px;
  height:48px;
  background: url('../../assets/images/hot-system-logo.png') no-repeat center center;
  background-size:contain;
  cursor:pointer;
}
.header-left .hot-search-keywords{
  display:flex;
  align-items: center;
}
.header-left .hot-search-keywords .hot-border-gradient{
  width:338px;
  height:44px;
  padding:3px 0 3px 2px;
  box-sizing:border-box;
  border-radius: 5px 0 0 5px; 
  background-image:linear-gradient(to right, #0099ff,#0099ff,#05d5fc,#07edfb);
  letter-spacing: 1px;
  position:relative;
}
.header-left .hot-search-keywords .hot-border-gradient .tooltip{
  position: absolute;
  top: 53px;
  left: 35px;
}
.header-left .hot-search-keywords .hot-border-gradient input{
  width: 100%;
  height: 100%;
  padding-left:24px;
  box-sizing:border-box;
  background-color:  #151923;
  border-radius: 5px 0 0 5px; 
  font-size:inherit;
  color:#dbdbdc;
  letter-spacing: inherit;
}
.header-left .hot-search-keywords .hot-serarch-icon{
  width:55px;
  height:44px;
  line-height: 40px;
  text-align: center;
  border:3px solid #07edfb;
  border-left:0;
  box-sizing:border-box;
  border-radius:0 5px 5px 0;
  background-image:linear-gradient(225deg,#07edfb,#0099ff)
}
.header-left .hot-search-keywords .hot-serarch-icon:hover{
  background-image:linear-gradient(90deg,#07edfb,#07edfc)
}
.header-left .hot-search-keywords .hot-serarch-icon i{
  font-size:26px;
  color:#ffffff;
  cursor:pointer;
}
/* 头部右边 */
.header-right{
  display:flex;
}
.hot-favorite{
  display:flex;
  align-items: center;
  cursor:pointer;
  transition: all .2s ease;
  color:#666666;
}
.hot-favorite{
  margin-left:30px;
}
.hot-favorite:hover{
  color:#ffffff;
}
.hot-favorite img{
  width: 35px;
  height: 30px;
  display:block;
  margin-right:10px;
}
</style>
